<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<title>配置权限</title>
	<%@include file="/WEB-INF/jsp/public/header.jspf" %>
	<script language="javascript" src="${pageContext.request.contextPath}/script/DataShowManager.js" charset="utf-8"></script>
	<script language="javascript" src="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.js"></script>
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css" />
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.css" />
	<script type="text/javascript">
		$(function(){
			//增加onclick事件
			$("input[name=priviledgeIds]").click(function(){
				//选中\取消某个权限时，也操作其子权限
				$(this).siblings("ul").find("input").attr('checked',this.checked)
				//当选中某个权限，应该 选中当前的直系上级
				if(this.checked == true){
					$(this).parents("li").children("input[name=priviledgeIds]").attr('checked',this.checked);
				}else{
					//当取消某个权限时，当同级的权限都没选中，则取消上级（当前）
					if($(this).parent().siblings("li").children("input[name=priviledgeIds]:checked").size() == 0){
						$(this).parent().parent().siblings("input[name=priviledgeIds]").attr('checked',this.checked);
					}
				}
			})
		});
	</script>
</head>
<body>

<!-- 标题显示 -->
<div id="Title_bar">
    <div id="Title_bar_Head">
        <div id="Title_Head"></div>
        <div id="Title"><!--页面标题-->
            <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 配置权限
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<!--显示表单内容-->
<div id=MainArea>
    <s:form action="role_setPriviledge">
    	<s:hidden name="id"></s:hidden>
        <div class="ItemBlock_Title1"><!-- 信息说明 --><div class="ItemBlock_Title1">
        	<img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 正在为【${name}】配置权限 </div> 
        </div>
        
        <!-- 表单内容显示 -->
        <div class="ItemBlockBorder">
            <div class="ItemBlock">
	             <table cellpadding="0" cellspacing="0" class="mainForm">
					<!--表头-->
					<thead>
						<tr align="LEFT" valign="MIDDLE" id="TableTitle">
							<td width="300px" style="padding-left: 7px;">
								<!-- 如果把全选元素的id指定为selectAll，并且有函数selectAll()，就会有错。因为有一种用法：可以直接用id引用元素 -->
								<%--<input type="CHECKBOX" id="cbSelectAll"
										onClick="selectAll(this.checked)" />
								<label for="cbSelectAll">
										全选
								</label>
							--%>
								<input type="CHECKBOX" id="cbSelectAll" onclick="$('input[name=priviledgeIds]').attr('checked',this.checked)"/>
								<label for="cbSelectAll">全选</label>
							</td>
						</tr>
					</thead>

							<!--显示数据列表-->
					<tbody id="TableData">
						<tr class="TableDetail1">
							<td>
							<%-- 
								不方便显示树状结构
				            	<s:checkboxlist name="priviledgeIds" 
				            					list="priviledgeList" 
				            					listKey="id" 
				            					listValue="name">
				            	</s:checkboxlist>
				            --%>
				            <%-- 第二阶段：	回显权限信息时，判断当前循环的id是否在priviledgeIds中  通过checked来实现
				            <s:iterator value="priviledgeList">
				            	<input type="checkbox" name="priviledgeIds" value="${id}" id="cb_${id}"
				            		<s:property value="%{id in priviledgeIds ? 'checked' : ''}"/>
				            	/>
				            	<label for="cb_${id}">${name}</label>
				            </s:iterator>
				            --%>
				            <%--利用ul+li标签，结合jQuery中的tree_view插件，显示树状结构 ,但是如果查询出所有的权限
				                                 只有一层--%>
					            <ul id="tree">
					            	<%--第一层：由于权限数据是初始化上去的，所有固定只有三层，就采用了三层循环的方式 --%>
						            <s:iterator value="topPriviledgeList">
						            	<li>
							            	<input type="checkbox" name="priviledgeIds" value="${id}" id="cb_${id}"
							            		<s:property value="%{id in priviledgeIds ? 'checked' : ''}"/>
							            	/>
							            	<label for="cb_${id}"><span class="folder">${name}</span></label>
								            <%--第二层 --%>
							           		<ul>
							           			<%--对于没次循环得到到权限对象，它有子权限列表这个属性（subPriviledges），都一并放入了值栈 --%>
							           			<%--由于在实体中采用的set容器存放数据，是无序的，每次查询，数据的顺序都不一样。。。 --%>
							                	<s:iterator value="subPriviledges">
							            			<li>
									            		<input type="checkbox" name="priviledgeIds" value="${id}" id="cb_${id}"
							            				<s:property value="%{id in priviledgeIds ? 'checked' : ''}"/>
							            				/>
							            				<label for="cb_${id}"><span class="folder">${name}</span></label>
							            				<%--第三层 --%>
							            				<ul>
										                	<s:iterator value="subPriviledges">
										            			<li>
												            		<input type="checkbox" name="priviledgeIds" value="${id}" id="cb_${id}"
										            				<s:property value="%{id in priviledgeIds ? 'checked' : ''}"/>
										            				/>
										            				<label for="cb_${id}"><span class="folder">${name}</span></label>
										            			</li>
										            		</s:iterator>
										           	 	</ul>
							            			</li>
							            		</s:iterator>
							           	 	</ul>
						            	</li>
						            </s:iterator>
					            </ul>
			            	</td>
            			</tr>
            		</tbody>
            	</table>
            </div>
        </div>
        
        <!-- 表单操作 -->
        <div id="InputDetailBar">
            <input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/>
            <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a>
        </div>
    </s:form>
</div>

<div class="Description">
	说明：<br />
	1，选中一个权限时：<br />
	&nbsp;&nbsp;&nbsp;&nbsp; a，应该选中 他的所有直系上级。<br />
	&nbsp;&nbsp;&nbsp;&nbsp; b，应该选中他的所有直系下级。<br />
	2，取消选择一个权限时：<br />
	&nbsp;&nbsp;&nbsp;&nbsp; a，应该取消选择 他的所有直系下级。<br />
	&nbsp;&nbsp;&nbsp;&nbsp; b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并递归向上做这个操作。<br />

	3，全选/取消全选。<br />
	4，默认选中当前岗位已有的权限。<br />
</div>
<script type="text/javascript">
	$('#tree').treeview();
</script>
</body>
</html>

